<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>操作日志</title>
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/lib/highlight/highlight.min.css">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <!-- 上方搜索栏 -->
        <fieldset class="table-search-fieldset">
            <legend>搜索</legend>
            <div class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <!-- 用户ID-->
                        <label class="layui-form-label" style="width: 100px">用户ID</label>
                        <div class="layui-input-inline" style="width: 150px">
                            <input type="text" id="inputUserId" autocomplete="off" class="layui-input" placeholder="输入ID"/>
                        </div>
                        <!-- 时间范围选择 -->
                        <label class="layui-form-label" style="width: 100px">日期范围</label>
                        <div class="layui-input-inline" style="width: 150px">
                            <input type="text" id="inputDateStart" autocomplete="off" class="layui-input" placeholder="选择开始时间" readonly>
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: 150px">
                            <input type="text" id="inputDateEnd" autocomplete="off" class="layui-input" placeholder="选择结束时间" readonly>
                        </div>
                    </div>
                    <!-- 搜索按钮 -->
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-primary layui-border-green btn-requestLog-action" data-type="search">
                            <i class="layui-icon layui-icon-search"></i> 搜 索
                        </button>
                        <button type="button" class="layui-btn layui-btn-primary btn-requestLog-action" data-type="refresh">
                            <i class="layui-icon layui-icon-refresh"></i> 清 除
                        </button>
                    </div>
                </div>
            </div>
        </fieldset>

        <!-- 表格 -->
        <table class="layui-hide" id="table-system-requestLog" lay-filter="table-system-requestLog"></table>

    </div>
</div>
<!--表格头部工具类（左上）-->
<script type="text/html" id="toolbar-table-requestLog">
    <div class="layui-btn-container">
        <!-- 【刷新】-->
        <button class="layui-btn layui-btn-sm layuimini-btn-primary" lay-event="btn-requestLog-refresh"><i class="fa fa-refresh"></i></button>
        <!-- 【删除】 -->
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="btn-requestLog-delete"><i class="fa fa-trash-o"></i> 删除</button>
    </div>


</script>
<!--表格每行末尾的操作按钮-->
<script type="text/html" id="tool-table-requestLog">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="requestLog-details">详情</a>
</script>
<!-- 点击行末【详情】后的弹窗内容 -->
<div id="dom_req_details" style="display: none;">
    <div class="layuimini-main">
        <div>
            <div class="layui-form-item">
                <label class="layui-form-label"><b>请求用户：</b></label>
                <div class="layui-input-block">
                    <div class="layui-form-mid" id="reqLogUserId"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><b>请求IP：</b></label>
                <div class="layui-input-block">
                    <div class="layui-form-mid" id="reqLogIp"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><b>用户UA：</b></label>
                <div class="layui-input-block">
                    <div class="layui-form-mid" id="reqLogUserAgent"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><b>请求URI：</b></label>
                <div class="layui-input-block">
                    <div class="layui-form-mid" id="reqLogUri"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><b>请求函数：</b></label>
                <div class="layui-input-block">
                    <div class="layui-form-mid" id="reqLogFunction"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><b>请求数据：</b></label>
                <div class="layui-input-block">
                    <pre><code class="language-json" id="logReqData"></code></pre>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><b>响应数据：</b></label>
                <div class="layui-input-block">
                    <pre><code class="language-json" id="logResData"></code></pre>
                </div>
            </div>

        </div>
    </div>
</div>
<!--引入JS文件-->
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/lib/highlight/highlight.min.js"></script>
<script>
    layui.use(['table'], function () {
        let $ = layui.jquery,
            form = layui.form,
            laydate = layui.laydate,
            table = layui.table;
        let currPage = 1                    // 定义全局变量：记录当前页码

        // 表格
        let table_requestLog = table.render({
            elem: '#table-system-requestLog',
            url: '/system/log/requestList',
            response: {statusCode: 200},
            height: 'full-158', //高度最大化减去差值
            toolbar: '#toolbar-table-requestLog', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: ['filter', 'exports'],
            title: '操作日志表',
            cols: [
                [
                    {type: "checkbox", width: 50},
                    {field: 'id', title: 'ID', width: 80, align: 'center', sort: true},
                    {field: 'userId', title: '用户ID', width: 100, align: 'center'},
                    {field: 'ip', title: 'IP', width: 150, align: 'center'},
                    {field: 'reqUri', title: '请求URI'},
                    {field: 'reqMethod', title: '请求方法', align: 'center', width: 100},
                    {field: 'timeCost', title: '用时(ms)', align: 'center', width: 100},
                    {
                        field: 'status', title: '请求结果', align: 'center', width: 95, templet: function (d) {
                            if (d.status === 1) {
                                return '<span class="layui-badge layui-bg-green">成功</span>'
                            } else {
                                return '<span class="layui-badge">失败</span>'
                            }
                        }
                    },
                    {field: 'createTime', title: '操作时间', align: 'center', width: 200},
                    {fixed: 'right', title: '操作', align: 'center', toolbar: '#tool-table-requestLog', width: 95}
                ]
            ],
            page: true,
            done: function (res, curr, count) {
                // 此处修复bug：删除最后一页数据后，跳转至上一页
                if (res.data.length === 0 && curr > 1) {
                    table_requestLog.reload({page: {curr: curr - 1}})
                }
                currPage = curr
            }
        });

        // 表格重载
        let active = {
            // 搜索：从第一页开始，检索数据不变
            search: function () {
                //执行重载
                table.reload('table-system-requestLog', {
                    page: {curr: 1},            // 页码
                    where: {                    // 检索数据
                        userId: $('#inputUserId').val(),
                        startDate: $('#inputDateStart').val(),
                        endDate: $('#inputDateEnd').val()
                    }
                });
            },
            // 刷新：从第一页开始，检索数据清空
            refresh: function () {
                //执行刷新
                table.reload('table-system-requestLog', {
                    page: {curr: 1},                                    // 页码
                    where: {userId: "", startDate: "", endDate: ""}     // 检索数据清空
                });
                $('#inputUserId').val('')
                $('#inputDateStart').val('')
                $('#inputDateEnd').val('')
            },
        };
        // 搜索或清空按钮
        $('.btn-requestLog-action').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //日期范围
        let dateStart = laydate.render({
            elem: '#inputDateStart',
            max: 1,                 // 最大时间为下一天的0点
            type: 'datetime',
            trigger: 'click',       //采用click弹出
            btns: ['clear', 'confirm'],
            done: function (value, dates) {
                // 不为空：表示没有点击清空按钮
                if ("" !== value) {
                    dateEnd.config.min = {
                        year: dates.year,
                        month: dates.month - 1, //关键
                        date: dates.date,
                        hours: dates.hours,
                        minutes: dates.minutes,
                        seconds: dates.seconds + 1
                    };
                }
                // 为空：表示点击清空按钮
                else {
                    dateEnd.config.min = '1900-01-01 00:00:00'
                }
            }
        });
        let dateEnd = laydate.render({
            elem: '#inputDateEnd',
            max: 1,
            type: 'datetime',
            trigger: 'click',
            btns: ['clear', 'confirm'],
            done: function (value, dates) {
                if ("" !== value) {
                    dateStart.config.max = {
                        year: dates.year,
                        month: dates.month - 1,
                        date: dates.date,
                        hours: dates.hours,
                        minutes: dates.minutes,
                        seconds: dates.seconds - 1
                    };
                } else {
                    dateStart.config.max = dateEnd.config.max
                }
            }
        });

        // 【头部按钮】监听头部按钮
        table.on('toolbar(table-system-requestLog)', function (obj) {
            switch (obj.event) {
                // 【刷新】按钮
                case "btn-requestLog-refresh":
                    table_requestLog.reload()
                    break;
                // 【删除】按钮（批量删除）
                case "btn-requestLog-delete":
                    // 获取选中的数据（以下的操作，逻辑基本同 修改状态 部分）
                    let checkLogList = table.checkStatus('table-system-requestLog').data
                    let logIds = "";
                    for (let i = 0; i < checkLogList.length; i++) {
                        logIds += (checkLogList[i].id + ",")
                    }
                    logIds = logIds.substring(0, logIds.lastIndexOf(','));
                    if (logIds.length > 0) {
                        // 删除用户 - 第 1 次确认
                        layer.confirm("<a style='color: red'>确认要 删除 选中的日志吗？</a>", {
                            icon: 3, title: '删除日志确认【1/2】'
                        }, function (index) {
                            layer.close(index);
                            // 删除用户 - 第 2 次确认
                            layer.confirm("<a style='color: red'>真的要 删除 选中的日志吗？删除后不可恢复！</a>", {
                                icon: 3, title: '删除日志确认【2/2】'
                            }, function (index) {
                                // 发起 删除用户 请求
                                $.post("/system/log/request/delete", {logIds: logIds}, function (d) {
                                    // 根据返回状态码输出提示信息，200 表示成功，其他表示失败
                                    if (d.code === 200) {
                                        layer.msg(d.msg, {time: 3000, icon: 1});
                                        table_requestLog.reload()
                                    } else {
                                        layer.msg(d.msg, {time: 3000, icon: 2});
                                    }
                                });
                            });
                        });
                    } else {
                        layer.msg('请勾选需要删除的日志记录！', {time: 2000, icon: 7});
                    }
                    break;
            }
        });

        // 【行末操作】监听表格行末按钮
        table.on('tool(table-system-requestLog)', function (obj) {
            let data = obj.data;
            let layEvent = obj.event;
            switch (layEvent) {
                // 【详情】按钮
                case "requestLog-details":
                    layer.open({
                        type: 1,
                        shade: 0.2,
                        title: '操作日志详情',
                        skin: 'layui-layer-prompt',
                        shadeClose: true,
                        area: ['600px', '500px'],
                        content: $("#dom_req_details"),
                        success: function (layero, index) {
                            $("#reqLogUserId").html(data.userId)
                            $("#reqLogIp").html(data.ip)
                            $("#reqLogUserAgent").html(data.userAgent)
                            $("#reqLogUri").html(data.reqUri)
                            $("#reqLogFunction").html(data.reqFunction)
                            $("#logReqData").html(format(data.reqData, false))
                            $("#logResData").html(format(data.resData, false))
                        }
                    });
                    break;
            }
        });
    });

    hljs.configure({
        tabReplace: '    ', // 4 spaces
    });
    hljs.highlightAll()

    // JSON字符串格式化工具
    function format(txt, compress/*是否为压缩模式*/) {
        // 缩进字符
        let indentChar = '   ';
        if (/^\s*$/.test(txt)) {
            // console.log('数据为空,无法格式化! ');
            return txt;
        }
        let data = "";
        try {
            data = eval('(' + txt + ')');
        } catch (e) {
            // console.log('数据源语法错误,格式化失败! 错误信息: ' + e.description);
            return txt;
        }
        let draw = [], last = false, This = this, line = compress ? '' : '\n', nodeCount = 0, maxDepth = 0;

        let notify = function (name, value, isLast, indent/*缩进*/, formObj) {
            nodeCount++;/*节点计数*/
            for (var i = 0, tab = ''; i < indent; i++) tab += indentChar;/* 缩进HTML */
            tab = compress ? '' : tab;/*压缩模式忽略缩进*/
            maxDepth = ++indent;/*缩进递增并记录*/
            if (value && value.constructor === Array) {/*处理数组*/
                draw.push(tab + (formObj ? ('"' + name + '":') : '') + '[' + line);/*缩进'[' 然后换行*/
                for (var i = 0; i < value.length; i++)
                    notify(i, value[i], i === value.length - 1, indent, false);
                draw.push(tab + ']' + (isLast ? line : (',' + line)));/*缩进']'换行,若非尾元素则添加逗号*/
            } else if (value && typeof value == 'object') {/*处理对象*/
                draw.push(tab + (formObj ? ('"' + name + '":') : '') + '{' + line);/*缩进'{' 然后换行*/
                var len = 0, i = 0;
                for (var key in value) len++;
                for (var key in value) notify(key, value[key], ++i === len, indent, true);
                draw.push(tab + '}' + (isLast ? line : (',' + line)));/*缩进'}'换行,若非尾元素则添加逗号*/
            } else {
                if (typeof value == 'string') value = '"' + value + '"';
                draw.push(tab + (formObj ? ('"' + name + '":') : '') + value + (isLast ? '' : ',') + line);
            }
        };
        var isLast = true, indent = 0;
        notify('', data, isLast, indent, false);
        return draw.join('');
    }
</script>
</body>
</html>